---
import '../global.css'
import '../legacy/get.scss'
import { getSession } from '../lib/game-saving/account'
import Navbar from '../components/navbar-main'
import StandardHead from '../components/standard-head.astro'

const session = await getSession(Astro.cookies)
---

<html lang='en'>
	<head>
		<StandardHead title='Get a Sprig' />
	</head>
	<body>
		<Navbar session={session} />
		
		<div class="wrapper">
			<div class="inner">
				<div class="heading-outer">
					<div class="heading-inner">
						<h1>
							Share your game,
							<br>
							get a Sprig
						</h1>
						<p class="subtitle">After you <a href='/~/new-game'>create your own game</a>, we'd love for you to share it with other makers on the internet!</p>
					</div>
					<img class="sprig-image" src="/stories-tiny/get-a-sprig.png" alt="sprig-front" width="800" height="602" data-story="sprig-front">
				</div>

				<div class="step">
					<div>
						<p class="step-number">Step 0:</p>
						<h2>Make a game</h2>
						<p>Check out <a href="https://sprig.hackclub.com/~/new-game" target="_blank" rel="noopener noreferrer">Sprig’s game builder</a> to get started!</p>
					</div>
					<img class="media" src="/screenshots/make_a_game.png" alt="screenshot of where to export the game file" />
				</div>

				<div class="step">
					<div>
						<p class="step-number">Step 1:</p>
						<h2>Download your game file</h2>
						<p>In the top left Sprig menu, press "Download". Your file should start downloading immediately.</p>
					</div>
					<img class="media" src="/screenshots/export.png" alt="screenshot of where to export the game file" />
				</div>
		
				<div class="step">
					<div>
						<p class="step-number">Step 2:</p>
						<h2>Fork the Sprig repository</h2>
						<p>Click below to create a fork of the Sprig repository.</p>
						<p>You might have to sign up for a GitHub account.</p>
						<a href="https://github.com/hackclub/sprig/fork" target="_blank">
							<button class="btn active">Fork hackclub/sprig</button>
						</a>
		
						<p>Optional: while you're here it'd be nice to give us a star!</p>
					</div>
					<img class="media" src="/screenshots/fork.png" alt="screenshot of github's fork page" />
				</div>
		
				<div class="step">
					<div>
						<p class="step-number">Step 3:</p>
						<h2>Upload your game to your fork</h2>
						<ul>
							<li>Open the "Games" folder within your fork</li>
							<li>Click "Add File"</li>
							<li>Select "Upload File"</li>
							<li>Add your file and click "Commit File"</li>
						</ul>
					</div>
					<img class="media" src="/screenshots/upload.png" alt="screenshot of where to upload the game file on github" />
				</div>
		
				<div class="step">
					<div>
						<p class="step-number">Step 4:</p>
						<h2>(Optional) Add a custom thumbnail</h2>
						<p>
							By default, the thumbnail that shows up in the gallery will be the first map of your game. If you want to
							change this, you can:
						</p>
						<ul>
							<li>Take a screenshot of your game (PNG format only)</li>
							<li>Click back to the gallery folder</li>
							<li>Open the img folder in gallery</li>
							<li>Click "Add File"</li>
							<li>Select "Upload File"</li>
							<li>Name your image file the file name for your game</li>
							<li>Click "Commit File"</li>
						</ul>
					</div>
					<img class="media" src="/screenshots/thumbnail.png" alt="screenshot of where to add a thumbnail" />
				</div>
		
				<div class="step">
					<div>
						<p class="step-number">Step 5:</p>
						<h2>Create a pull request</h2>
						<ul>
							<li>On your fork's page, click on "Contribute"</li>
							<li>Select "Open Pull Request"</li>
							<li>Click "Create Pull Request"</li>
							<li>Name your pull request with the name of your game</li>
							<li>Complete the information requested in the Pull Request body</li>
							<li>Click "Create Pull Request"</li>
						</ul>
						<p>We'll take a look at your game! Once approved, your game will appear in the gallery :)</p>
						<p>If you're a high schooler or younger and your game meets <a href="https://github.com/hackclub/sprig/blob/main/docs/GET_A_SPRIG.md" target="_blank">the requirements</a> we'll also get in touch to mail you a physical Sprig of your own.</p>
					</div>
					<img class="media" src="/screenshots/contribute.png" alt="screenshot of the create pull request button" />
				</div>
		
				<a href="/gallery" class="bottom-cta"><button class="btn big active">Check out the gallery &raquo;</button></a>
			</div>
		</div>
		
		<img src="/SPRIGDINO.svg" alt="sprig dino" class="sprig-dino" />
	</body>
</html>
